<template>
  <el-col :lg="6" :sm="12" :xs="12">
    <div class="cupk2-block-box" style="overflow: hidden;">
      <el-row>
        <el-col :span="24" style="text-align: center;">
          <el-avatar :class="'cupk2_home_row_icon ' + props.colorType" src="\images\photo\photo.png"
            :icon="props.icon" />
        </el-col>
        <el-col :span="24" style="text-align: center;">
          <div style="color: #7c8db5;margin-top: 10px;">{{ userInfoStore.$state.user.name }} {{
            userInfoStore.$state.user.loginname }}</div>
          <div class="cupk2_user_tags" style="font-weight: 700;padding-top: 10px;font-size: 12px;text-align: left;">
            <el-tag v-for="tag in userInfoStore.$state.user.tags" :key="tag" class="tag" round type="success">
              {{ tag }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-col>
</template>
<script setup lang="ts">

import { useUserInfoStore } from '@/store/useUserInfoStore';

const userInfoStore = useUserInfoStore();


const props = defineProps({
  colorType: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
})



</script>
<style scoped>
.cupk2-block-box {
  background-color: #ffffff;
  text-align: center;
  border-radius: 1em;
  margin-left: 20px;
  margin-bottom: 20px;
  height: 130px;
  padding: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

.cupk2_home_row_icon {
  height: 48px;
  width: 48px;
  font-size: 28px;
}

.cupk2_user_tags .tag {
  margin-left: 10px;
  margin-top: 4px;
}
</style>
